<template>
  <div class="dashboard-container">
    我是主页面 , 该玩就玩
    <div>用户的账号 : {{ id }}</div>
    <br>
    <div>用户的昵称 : {{ name }}</div>
    <br>
    <div>用户的头像 : {{ avatar }}</div>
    <br>
    <div>用户的TOKEN信息 : {{ token }}</div>
    <br>
    <div>用户的WebSocket对象 : {{ webSocket }}</div>
    <br>
    <div>用户的会话列表: {{ conversation }}<</div>
  </div>
</template>

<script>
// <!-- 导入仓库 -->
import {mapGetters} from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {};
  },
  methods: {
    //  向服务端 , 进行请求,  当前用户的朋友列表 , 以及朋友的详细信息 , 以及聊天记录 , 等等
    getFriends() {
      this.$store
        .dispatch("user/getFriends")
        .then(() => {
          console.log("朋友列表 , 展示成功");
          //  获取用户的会话列表 , 以及 , 对应的所有的聊天消息
          this.getConversations();
        })
        .catch((error) => {
          console.log("用户的朋友列表 , 展示失败 , 登录错误" + error);
        })
    },

    //获取会话的函数 ,
    getConversations() {
      this.$store
        .dispatch("message/getConversations")
        .then(() => {
          console.log("会话 , 展示成功");
        })
        .catch((error) => {
          console.log("用户的会话列表 , 展示失败 , 登录错误" + error);
        })
    },
    //  连接服务端的webSocket , 建立连接 , 实时接收消息
    linkWeSocket() {
      this.$store
        .dispatch("user/initWebSocket").then(() => {
        //  连接WebSocket , 并且 , 接收WebSocket的发送来的数据
        this.webSocket.onopen = () => {
          console.log("建立连接");
        };
        this.webSocket.onclose = () => {
          console.log("关闭连接");
        };
        this.webSocket.onerror = () => {
          console.log("连接出错");
        };
        // 收到消息,消息监听 , 监听服务端发送来的消息,然后进行分析 , 打印
        this.webSocket.onmessage = (msg) => {
          console.log("接收到了消息 : " + msg);
          //---------------------------------------------------------接收到客户端发送的消息
          let msgObj = JSON.parse(msg.data);
          //获取消息的类别 , 是私聊消息 , 还是请求消息
          //如果是request .则是请求消息
          if (msgObj.category == "request") {
            //判断是哪中类型的请求消息
            console.log("消息类别 : " + msgObj.specific);
            if (msgObj.specific == "ONE") {                              /////////////////////  请求消息
              this.$notify({title: '请求消息', message: "" + msgObj.name + " : 向您发送了一条好友请求消息!", type: 'success'});
              //  同意请求的消息
            } else if (msgObj.specific == "TWO") {                        //////////////////// 同意请求的消息
              //创建一个对象 , 把该用户 , 存放到Vuex里面
              this.$store
                .dispatch("user/addFriends", msgObj)
              this.$notify({title: '同意消息', message: "" + msgObj.name + " : 同意了您的好友请求消息!", type: 'success'});
              //  拒绝请求的消息
            } else if (msgObj.specific == "THREE") {                         ///////////////// 拒绝请求的消息
              this.$notify({title: '拒绝消息', message: "" + msgObj.name + ' : 拒绝了您的好友请求消息', type: 'success'});
              //同意请求后 , 保存被请求的用户的详细信息
            } else if (msgObj.specific == "FIVE") {                          /////////////////////  重Vuex里面,删除一个用户
              //调用VueX里面的方法 , 删除一个指定账号的用户
              this.$store
                .dispatch("user/deleteFriends", msgObj.id)
              return;
            }
            //  如果是conversation . 则是会话消息
          } else if (msgObj.category == "conversation") {
            console.log("会话消息的消息类别" + msgObj.specific);
            if (msgObj.specific == "SIX") {                          //////////// 添加一个会话

              //  向Vuex里面 , 添加一个会话
              this.$store
                .dispatch("message/addConver", msgObj)
              return;
            }
          } else {                                                            /////////////////////// 私聊消息
            //  否则是私聊消息 , 把私聊消息 , 保存到Vuex 里面去
            //(创建一个消息对象 , 存放到Vuex里面)
            let message = {
              "id": msgObj.fromId, //消息发送者
              "acc": msgObj.toId, //消息接收者
              "type": msgObj.type, //消息的类型
              "mes": msgObj.content, //消息内容
              "date": msgObj.time //消息时间
            }
            //保存消息
            // 向Vuex里面 , 保存一条消息 , 哪到指定会话的id , 通过会话的id , 来保存消息
            var m = {id: msgObj.converid, me: message};
            this.$notify({title: '聊天消息', message: msgObj.fromName + ' :  向你发送了一条私聊消息', type: 'success'});
            // //保存消息
            this.$store.dispatch("message/addMessage", m)
          }
        };
      }).catch(() => {
        this.$message({message: '不支持聊天!', type: 'success'});
      });
    },

  },
  //  指定一个注册钩子 , 当组件注册时 , 向服务端 , 请求数据,到客户端 , 进行展示
  mounted: function () {
    this.linkWeSocket(); //连接WebSocket
    //获取朋友列表
    this.getFriends();//需要触发的函数


  },
  //使用一个计算属性 , 来获取初始数据 , 进行展示
  computed: {
    //获取Vuex里面的数据
    ...mapGetters(['id', 'name', 'avatar', 'token', 'webSocket', 'conversation']),
  },
}
</script>

<style lang="scss" scoped>
</style>
